<template>
  <div>
    <JobDetail :d="d"></JobDetail>
    <!-- 弹出框 -->
    <div class="c-selected-detail__fixed" v-if="layerShow" @click="layerShow = false">
      <div class="c-selected-detail__fixed-content">
        <img src="../../imgs/job-detail/layer.png">
      </div>
    </div>
    <!-- 照片浏览 -->
    <pic-view :imgSrc="imgSrc" :handleChange="handleChange" ref="picView"></pic-view>
  </div>
</template>

<script>
import BaseJobDetail from '@lib/h5/comp/job-detail';

const JobDetail = {
  extends: BaseJobDetail,
  methods: {
    onClickCompanyPhotos(item, i) {
      this.$parent.imgSrc = this.d.company.photos.map(x => {
        return {
          image_path: x.url,
        }
      });
      this.$parent.$refs.picView.popSwiperShow = true;
      this.$parent.$refs.picView.swiperIndex = i;
    },
    onClickPhotos(item, i) {
      this.$parent.imgSrc = this.photos.map(x => {
        return {
          image_path: x,
        }
      });
      this.$parent.$refs.picView.popSwiperShow = true;
      this.$parent.$refs.picView.swiperIndex = i;
    },
    onClickCompany() {
      this.$parent.layerShow = true;
    },
    onShowMap() {
      this.$parent.layerShow = true;
    },
    onPlayVideo() {
      this.$refs.video.play();
    },
  },
};

export default {
  props: ['d'],
  data() {
    return {
      layerShow: false,
      imgSrc: [],
    };
  },
  methods: {
    handleChange (i) {
      this.$refs.picView.swiperIndex = i
    },
  },
  components: {
    JobDetail,
  },
};
</script>

<style lang="stylus">
.c-selected-detail__fixed
  position fixed
  left 0
  top 0
  width 100%
  height 100%
  background-color rgba(0,0,0,.2)
  z-index 9999
.c-selected-detail__fixed-content
  margin-top 180px
  text-align center
  img
    width 300px
</style>
